<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2024/8/20
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<link rel="stylesheet" type="text/css" href="${path}/static/web/css/Login.css"/>
<html>
<head>
    <script src="${path}/static/web/js/jquery-3.6.0.min.js"></script>
    <!--添加表单验证-->

    <title>登录</title>
</head>
<body>
        <div class="wrapLogin">
            <div class="loginPanel">
            <form id="myform" action="${path}/web/loginCheck" method="post">
                <h2>社区停车位管理系统</h2>
                <label id="loginrs" style="color: red"></label>
               <p> <label id="account">手机号:</label><input type="text" name="UserPhone" id="name"><span id="telRs"></span></p>
               <p><label>密码:</label> <input type="password" name="UserPass" id="pwd"></p>
                <p class="btn"><input type="submit" class="btnLogin" value="登录" id="enroll"><input type="reset" class="btnCancel" value="重置" /></p>
            </form>
          <p style="color: white"><input class="rad" type="radio" name="login" id="user" value="0" checked="checked">业主登录
              <input class="rad" type="radio" name="login" id="admin" value="1" >管理员登录
              <a href="register" style="text-decoration: none; color: white">没有业主账号?去注册</a></p>
        </div>

        </div>
        <!--验证并提示手机号/账号名或者密码是否正确-->
        <script>

            function checkpwd()
            {
                    <c:if test="${param.msg eq 1}">
                    $("#loginrs").html("手机号或者密码错误");
                    </c:if>

                    <c:if test="${param.msg eq 2}">
                    $("#loginrs").html("账号名或者密码错误");
                    $("#admin").attr("checked","checked");
                    $("#myform").attr("action","/project/manage/loginCheck");
                    $("#account").html("账号名:");
                    $("#name").attr("name","AdminUserName");
                    $("#pwd").attr("name","AdminPassWord");
                    </c:if>
            }
            $(function ()
            {
                checkpwd();
            })
        </script>

        <script>
            <!-- 登录选项增加改变事件-->
            <!--与手机号格式验证和账号名格式验证联立-->
            $(function(){
                $("#name").blur(checktel);
                $(".rad").change(loginSelect)
            })
            function loginSelect()
            {
                //通过获取按钮 value 改变 form 表单提交位置
                var option=$(this).val();

                if (option==0)
                {
                    $("#myform").attr("action","/project/web/loginCheck");
                    $("#account").html("手机号:");
                    $("#name").attr("name","UserPhone");
                    $("#pwd").attr("name","UserPass");
                    $("#name").blur(checktel);

                }
                if (option==1)
                {
                    $("#myform").attr("action","/project/manage/loginCheck");
                    $("#account").html("账号名:");
                    $("#name").attr("name","AdminUserName");
                    $("#pwd").attr("name","AdminPassWord");
                    $("#myform").attr("action","/project/manage/loginCheck");
                    $("#account").html("账号名:");
                    $("#telRs").html("");
                    $("#name").attr("name","AdminUserName");
                    $("#pwd").attr("name","AdminPassWord");
                    $("#name").blur(checkcount2);
                }
            }
            function checktel()
            {
                //用户登录
                {
                    var tel = $("#name").val();
                    var reg = /^1[3-9]\d{9}$/;
                    var flag = reg.test(tel)
                    if (flag == true)
                    {
                        $("#telRs").css("color", "green");
                        $("#telRs").html("√");

                    } else
                    {
                        $("#telRs").css("color", "red");
                        $("#telRs").html("手机格式错误");

                    }
                    return flag;
                }
            }
            function checkcount2()
            {
                //管理员登录
                {
                    var tel = $("#name").val();
                    var reg = /\w+/;//字母数字下划线点减号//只能由数字字母开头或结尾
                    var flag = reg.test(tel)
                    if (flag == true) {
                        $("#telRs").css("color", "green");
                        $("#telRs").html("√");
                    }
                    else
                    {
                        $("#telRs").css("color", "red");
                        $("#telRs").html("账号名格式错误");
                    }
                    return flag;
                }
            }
        </script>


</body>
</html>
